<template>
    <div id="clinicAllComment">
        <header>
            <i @click="goBack()"></i>
            <div>评价</div>
        </header>
        <div class='border10'></div>
        <ul class="list">
            <Loadmore
                :bottom-method="loadBottom"
                :bottom-all-loaded="allLoaded" 
                ref="loadmore"
                :autoFill="false">
                <div class='mc' v-if="list.length<1">
                    <!-- <img src="../../../image/no_collection@2x.png" width='110' alt=""> -->
                    <p>暂无数据!</p>
                </div>
                <li v-for='(item,index) in list' :key='index' v-if="list.length>0">
                   <div class="name">
                        <h4>匿****名</h4>
                        <i>2017.12.23</i>
                   </div>
                   <el-rate
                        v-model="item.grade*1"
                        disabled
                        text-color="#ff9900"
                        score-template="{value}"
                        :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
                    </el-rate>
                    <p class='content'>
                        {{item.content}}
                    </p>
                    <div class='reply' v-if='item.reply'>
                        <span class='before'>
                            诊室回复:
                        </span>
                        <span class='content'>
                            {{item.reply}}
                        </span>
                    </div>
                    
                </li>
            </Loadmore>
        </ul>
    </div>
</template>
<script>
    import {Loadmore} from 'mint-ui';
    export default {
        data() {
            return {
                list: [],
                sentPage:{
		          page : 1,//分页累加
		        },//接口入参
		        totalNum: 0, //总数据条数
                allLoaded: false,	
                value5: 4,
                clinicid: '',
            }
        },
        components: {
            Loadmore
        },
        methods: {
            //返回上一级
            goBack() {
                this.$router.back();
            },
            init() {
                this.obj.clinicid = this.$route.query.clinicid;
            },
            // 获取评价列表
            getList(params) {
                this.$api.post(this.$api.baseURLSchool,"selecttype_view/view_doctor_comment_user/0?clinicid="+this.clinicid,params,r => {
                    this.totalNum = r.data.records;
                    if(this.sentPage.page==1) {
                        this.list = r.data.rows;
                    }else {
                        this.list = this.list.concat(r.data.rows);
                    }
                    if(r.data.rows.length == 0&&this.sentPage.page>1) {
                        this.$utils._toast("暂无更多评价");
                    }
                    if(this.totalNum == this.list.length) {
                        this.allLoaded = true;
                    }
                },err => {
                    console.log(err);
                })
            },
            //上拉加载
			loadBottom() {
				(this.sentPage.page)++;
		        setTimeout(() => {
		        	this.getList(this.sentPage);
		        }, 20);
		        if(this.totalNum == this.list.length) {
					this.allLoaded = true;
		        }
				this.$refs.loadmore.onBottomLoaded();
			}
        
        },
        created() {
            this.getList(this.sentPage);
        }
    }

</script>
<style lang="scss" scoped>
    .mc {
    padding: 40px 0;
    margin: auto;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%,-50%);
    img {
        display: block;
        margin: 0 auto;
    }
    p {
        padding-top: 10px;
        text-align: center;
    }
}

</style>